<template>
	<view class="content">
		<!-- <div class='bj'>
			<div class='info'>登录</div>
		</div> -->
		<div class='contBox'>
			<view class="cu-form-group">
				<!-- <view class="title" style="width: 72rpx;">
					<div class='img1'></div>
				</view> -->
				<input placeholder="请输入用户名" name="input" v-model="name"></input>
			</view>
			<view class="cu-form-group">
				<!-- <view class="title" style="width: 72rpx;">
					<div class='img2'></div>
				</view> -->
				<input placeholder="请输入密码" name="input" v-model="passWord" type="password"></input>
			</view>
			<!-- <view class="cu-form-group" style="min-height: 40rpx;">
			</view> -->
			<div @click='toNext' class='myBtn'>登录</div>
		</div>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				passWord: '',
			}
		},
		onLoad() {},
		onShow() {
			uni.clearStorageSync()
			uni.hideToast()
			uni.hideLoading()
		},
		mounted() {},
		methods: {
			getToken() {
				let _this = this;
				_this.uniRequest({
					url: `/login`,
					method: 'post',
					data: {
						username: _this.name,
						password: _this.passWord,
					},
					success: res => {
						//console.log('返回值', res);
						if (res.code == 200) {
							uni.setStorageSync('token', res.data.jwt);
							uni.reLaunch({
								url: `/pages/index/index`
							})
						}
					},
					fail: err => {
						//console.log('request fail错误', err);
					}
				});
			},
			toNext() {
				//console.log('this.name==', this.name)
				//console.log('this.passWord==', this.passWord)
				if (this.name == '' || this.passWord == '') {
					uni.showToast({
						title: '请输入正确的用户名和密码',
						mask: true,
						duration: 1000,
						icon: 'none'
					})
				} else {
					this.getToken()
				}
			},
		}
	}
</script>

<style lang='less' scoped>
	.content {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		position: relative;
		background-color: #eae9e5;
		.bj {
			background: url(~@/static/imgs/bg_denglu.png) no-repeat center;
			background-size: 100% 100%;
			width: 100vw;
			height: 52vw;
			.info {
				padding: 17vw 68rpx 0;
				font-size: 54rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
		}

		.contBox {
			width: calc(100% - 60rpx);
			margin: 0rpx 30rpx;
			padding: 40rpx 0;
			background: #eae9e5;
			border-radius: 16rpx;
			position: absolute;
			left: 0;
			top: 20vh;
			overflow: hidden;
			color: #cab59b;
			.cu-form-group{
				margin:0 40rpx;
				padding: 0;
				box-sizing: border-box;
				line-height: 100rpx;
				background: #eae9e5;
				border-bottom: 1rpx solid #cab59b;
				.uni-input-placeholder{
					color: #cab59b;
				}
			}
		}

		.img1 {
			background: url(~@/static/imgs/icon_zhanghao.png) no-repeat center;
			background-size: 100% 100%;
			height: 48rpx;
			width: 48rpx;
			margin: 10rpx 0;
		}

		.img2 {
			background: url(~@/static/imgs/icon_mima.png) no-repeat center;
			background-size: 100% 100%;
			height: 48rpx;
			width: 48rpx;
			margin: 10rpx 0;
		}

		.myBtn {
			width: calc(100% - 100rpx);
			margin: 40rpx 50rpx 0;
			line-height: 100rpx;
			/* background: linear-gradient(90deg, #41B2F6 0%, #1C81DF 100%); */
			/* border-radius: 48rpx; */
			font-size: 30rpx;
			font-weight: normal;
			color: #FFFFFF;
			text-align: center;
			border-radius: 12rpx;
			margin: 80rpx auto 0;
			background-color: #a47203;
		}
	}
</style>
